<!-- 科室管理 -->
<template>
  <div class="body">
    <el-row :gutter="12" class="demo-radius">
      <el-col
        v-for="(radius, i) in radiusGroup"
        :key="i"
        :span="6"
        :xs="{ span: 12 }"
      >
        <div
          class="radius"
          :style="{
            borderRadius: radius.type
              ? `var(--el-border-radius-${radius.type})`
              : '',
          }"
        >
          <div class="left">
            科室名称：
            <el-input
              @blur="setData"
              v-model="search.name"
              size="small"
              style="width: 150px,box-shadow: 0px 0px 2px 0.3px #88888831,height: 33px;
              "
            />
            <div id="require">
              <el-button type="primary" @click="returnFn()">查询</el-button>
            </div>
          </div>
          <div>
            <el-button type="primary" @click="addSupplier">新增</el-button>
            <!-- 新增弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="添加科室">
              <el-form :model="form">
                <el-form-item label="科室名称：" :label-width="formLabelWidth">
                  <el-input v-model="form.officeName" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button
                    type="primary"
                    :plain="true"
                    @click="supplierMaintenance"
                    >确认</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-table :data="getDepartmentData" style="width: 96%" class="table">
      <el-table-column prop="id" label="序号" />
      <el-table-column label="科室名称" prop="officeName" />
      <el-table-column label="科室编号" prop="officeNumber" />
      <el-table-column align="right">
        <template #header>
          <el-table-column label="操作" v-text="text" />
        </template>

        <template #default="scope">
          <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row), (editDialog = true)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="
              handleDelete(scope.$index, scope.row),
                (centerDialogVisible = true)
            "
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除弹窗 -->
    <el-dialog v-model="centerDialogVisible" width="30%" center>
      <span> 确认删除吗？ </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteDepartment"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialog" title="编辑科室">
      <el-form :model="form">
        <el-form-item label="科室名称：" :label-width="formLabelWidth">
          <el-input v-model="form.officeName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog = false">取消</el-button>
          <el-button type="primary" :plain="true" @click="edit">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    
    <script lang="ts">
import { numberLiteralTypeAnnotation } from "@babel/types";
import { useStore, mapGetters, mapMutations } from "vuex";
import {
  computed,
  ref,
  defineComponent,
  reactive,
  watchEffect,
  onBeforeMount,
} from "vue";
import { ElMessage } from "element-plus";
import axios from "@/utils/http";

const now = new Date();

export default defineComponent({
  name: "Supplier",
  setup() {
    const store = useStore();

    //查询
    const returnFn = () => {   
      axios({
      url:"/setting/officeManage/findOfficeByName",
      method: "get",
      params: {
        officeName:search.name
      },
    })
      .then((res: any) => {
        console.log("查询", res.data);
        store.state.department.tableData = res.data.data;
        // tableTotal = res.data.count;
      })
      .catch((err) => {
        console.log(err);
      });
    };

    //输入框为空时重新拿取数据
    const setData = computed(() => {
      console.log("name", search.name);
      if (!search.name) {
        setDepartmentData({
          currentPage: 0,
          pageSize: pageSize.value,
        });
      }
    });

    //搜索
    const search = reactive({
      name: null,
    });
  
    const departmentFilterData = mapMutations([
      "departmentFilterData",
    ]).departmentFilterData.bind({
      $store: store,
    });

    const text = "操作";

    //分页
    const pageSize = ref(10);
    const setDepartmentData = mapMutations([
      "setDepartmentData",
    ]).setDepartmentData.bind({
      $store: store,
    });
    onBeforeMount(() => {
      setDepartmentData({
        currentPage: 1,
        pageSize: pageSize.value,
      });
    });
    const getDepartmentData = computed(
      mapGetters(["getDepartmentData"]).getDepartmentData.bind({
        $store: store,
      })
    );
    const pageChange = (currentPage: any) => {
      setDepartmentData({ currentPage: currentPage, pageSize: pageSize.value });
    };

    //编辑
    let supplierRow: ISuppliers = {
      id: 1,
      officeName: "",
      officeNumber: "",
    };
    const handleEdit = (index: number, row: ISuppliers) => {
      console.log(index, row);
      supplierRow = row;
      form.officeName = row.officeName;
      // edit(index, row)
    };
    //删除
    const handleDelete = (index: number, row: ISuppliers) => {
      console.log(index, row);
      supplierRow = row;
    };

    let tableData = ref(store.state.department.tableData);

    //搜索新增框
    const radiusGroup = ref([
      {
        name: "Small Radius",
        type: "small",
      },
    ]);

    const getValue = (type: string) => {
      const getCssVarValue = (prefix: any, type: any) =>
        getComputedStyle(document.documentElement).getPropertyValue(
          `--el-${prefix}-${type}`
        );
      return getCssVarValue("border-radius", type);
    };
    const addSupplier = () => {
      (form.officeName = ""), (dialogFormVisible.value = true);
    };
    //新增
    const dialogFormVisible = ref(false);

    const editDialog = ref(false);
    const formLabelWidth = "140px";

    const form = reactive({
      officeName: "",
      officeNumber: "",
    });

    // 新增科室弹窗确认函数
    const supplierMaintenance = () => {
      if (!form.officeName) {
        ElMessage({
          showClose: true,
          message: "科室名称不能为空！",
          type: "error",
        });
      } else if (form.officeName) {
        let flag = false;
        store.state.department.tableData.forEach((item: any) => {
          if (item.officeName == form.officeName) {
            flag = true;
          }
        });
        if (flag) {
          ElMessage({
            showClose: true,
            message: "科室名称已经存在！",
            type: "error",
          });
          return;
        }
        axios({
          url: "/setting/officeManage/addOfficeByName",
          method: "post",
          params: {
            officeName: form.officeName,
          },
        })
          .then((res: any) => {
            console.log("1", res);
            setDepartmentData({ currentPage: 1, pageSize: pageSize.value });
          })
          .catch((err) => {
            console.log(err);
          });
        dialogFormVisible.value = false;
      }
    };

    //编辑弹窗确认函数
    const edit = () => {
      axios({
        url: "/setting/officeManage/updateOfficeById",
        method: "post",
        data: {
          officeName: form.officeName,
          id: supplierRow.id,
        },
      }).then((res: any) => {
        console.log("1", res);
        setDepartmentData({ currentPage: 1, pageSize: pageSize.value });
      });
      editDialog.value = false;
    };

    //删除弹窗
    const centerDialogVisible = ref(false);
    const deleteDepartment = () => {
      axios({
        url: "/setting/officeManage/delOfficeById",
        method: "post",
        params: {
          id: supplierRow.id,
        },
      }).then((res: any) => {
        console.log("1", res);
        setDepartmentData({ currentPage: 1, pageSize: pageSize.value });
      });
      centerDialogVisible.value = false;
    };

    return {
      pageChange,
      getDepartmentData,
      text,
      search,
      returnFn,
      handleEdit,
      edit,
      handleDelete,
      tableData,
      radiusGroup,
      getValue,
      getComputedStyle,
      editDialog,
      dialogFormVisible,
      formLabelWidth,
      form,
      supplierMaintenance,
      ElMessage,
      centerDialogVisible,
      addSupplier,
      setDepartmentData,
      deleteDepartment,
      setData,
      departmentFilterData,
    };
  },
});

interface ISuppliers {
  id: number;
  officeName: string;
  officeNumber: string;
}
</script>
  <style scoped>
.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.table {
  border: 1px solid #88888831;
  box-shadow: 0px 0px 5px 2.5px #88888831;
}
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 60px;
  width: 1155px;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin: 20px;
  box-shadow: 0px 0px 5px 2.5px #88888831;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #fff;
}
.left {
  color: #676a6d;
}
/* 新增 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-dialog {
  --el-dialog-width: 10%;
}
/* 删除弹窗 */
.dialog-footer button:first-child {
  margin-right: 10px;
}

#require{
 float: right;
 margin-left:20px
}
</style>
    